<template>
  <div class="academic-report">
    <h2>学情报告</h2>

    <!-- 成绩走向图 -->
    <PerformanceChart :data="reportData.performanceTrend" />

    <!-- 知识点掌握情况 -->
    <KnowledgeMastery :data="reportData.knowledgeMastery" />

    <!-- 课堂活跃度分析 -->
    <ClassEngagement :data="reportData.classEngagement" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import PerformanceChart from './PerformanceChart.vue';
import KnowledgeMastery from './KnowledgeMastery.vue';
import ClassEngagement from './ClassEngagement.vue';

export default defineComponent({
  components: {
    PerformanceChart,
    KnowledgeMastery,
    ClassEngagement
  },
  props: {
    reportData: {
      type: Object,
      required: true
    }
  }
});
</script>

<style scoped>
.academic-report {
  width: 80%;
  margin: 40px auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
</style>
